<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="style/fjol_style.css"/>
		<link rel="stylesheet" type="text/css" href="style/xol_style.css"/>
		<link href="css/xzx_style.css" rel="stylesheet" />
		<link href="css/xzx_pull_refresh.css" rel="stylesheet" />
	</head>

	<body>
		<script src="js/mui.min.js"></script>
		<script src="js/jquery-2.1.0.js"></script>
		<script src="js/generalUtil.js"></script>
		<script src="js/network.js"></script>
		<script src='js/md5.js'></script>
		<div id="refreshContainer" class="mui-content mui-scroll-wrapper">
			<div class="mui-scroll">
				<!--数据列表-->
				<ul class="mui-table-view">

				</ul>
			</div>
		</div>
		
		<script type="text/javascript">
			var _type;
			var _pageNo = 1;
			var _lstData;
			
			mui.init({
				pullRefresh: {
					container: "#refreshContainer", //下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等
					down: {
						height: 50, //可选,默认50.触发下拉刷新拖动距离,
						auto: false, //可选,默认false.首次加载自动下拉刷新一次
						contentdown: "下拉可以刷新", //可选，在下拉可刷新状态时，下拉刷新控件上显示的标题内容
						contentover: "释放立即刷新", //可选，在释放可刷新状态时，下拉刷新控件上显示的标题内容
						contentrefresh: "正在刷新...", //可选，正在刷新状态时，下拉刷新控件上显示的标题内容
						callback: pulldownRefresh //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
					},
					up: {
						height: 50, //可选.默认50.触发上拉加载拖动距离
						auto: false, //可选,默认false.自动上拉加载一次 
						contentrefresh: "正在加载...", //可选，正在加载状态时，上拉加载控件上显示的标题内容
						contentnomore: '没有更多数据了', //可选，请求完毕若没有更多数据时显示的提醒内容；
						callback: pullUpLoadMore
					}
				}
			});
			
			mui.plusReady(function() {
				var centerView= plus.webview.currentWebview();
				var parentPage = centerView.parent();
				mui.fire(parentPage,'onClientSubPageReady');
			});
			
			document.addEventListener('configClientSubpage',function(event){
				_type = event.detail.keyword;
				mui('#refreshContainer').pullRefresh().pulldownLoading();
//				console.log(_type);
			});
			
			//下拉刷新
			function pulldownRefresh() {
				mui('#refreshContainer').pullRefresh().enablePullupToRefresh();
				var ul = document.querySelector('.mui-table-view');
				_pageNo = 1;
				
					getMyHouseData(_pageNo, _type, function(lstClient) {
						ul.innerHTML = '';
						if(lstClient.length > 0) {
							ul.insertBefore(createFragment(ul, lstClient, false), ul.firstChild);
						}else if(lstClient.length == 0) {
							var _li = document.createElement('li');
							_li.className = 'mui-text-center';
							_li.innerHTML = '<img src="images/icon_blank.png"/>';
							ul.insertBefore(_li,null);
//							console.log(ul.innerHTML);
						}
						mui('#refreshContainer').pullRefresh().endPulldownToRefresh();
					}, function() {
						mui('#refreshContainer').pullRefresh().endPulldownToRefresh();
					});
			}
			
			//上拉加载
			function pullUpLoadMore() {
				var ul = document.querySelector('.mui-table-view');
				_pageNo++;
				
					getMyHouseData(_pageNo, _type, function(lstClient) {
						if(lstClient.length > 0) {
							ul.appendChild(createFragment(ul, lstClient, true));
						}
						mui('#refreshContainer').pullRefresh().endPullupToRefresh(lstClient.length);
					}, function() {
						mui('#refreshContainer').pullRefresh().endPullupToRefresh();
					});
					
			}
			var getMyHouseData = function(page, kind, successCallback, failCallback) {
//				console.log(page);

				var userInfo = common.myStorage.getItem('userInfo');
				var param = [
				{
					key: 'keyword',
					value: kind
				}, {
					key: 'page',
					value: page
				}, {
					key: 'rows',
					value: 10
				}];
				var net = fjNetwork;
				net.get('fjzx/client/house-tag-recommend-list.json', param, function(data) {
					//成功
//					console.log(data.rows.length);
					successCallback(data.rows);
					
					var imgObj = $('.mui-table-view img');
					setImgWidthHeight(imgObj);
//					console.log(JSON.stringify(data));
				}, function(message) {
					//失败
					mui.toast(message);
					failCallback();
				});
			};
			var createFragment = function(ul, lstHouse) {
				var fragment = document.createDocumentFragment();
				var li;
				var keywordCls = [		//关键字颜色类cls
									'keyword-color1 ',
									'keyword-color2 ',
//									'keyword-color3 ',
//									'keyword-color4 '
								];
								
				for(var i = 0; i < lstHouse.length; i++) {
					li = document.createElement('li');
					li.className = 'mui-table-view-cell';
					var houseInfo = lstHouse[i];
					li.setAttribute("id",houseInfo.id);
					var keywords = lstHouse[i].keyword.split(',');
//					console.log(keywords);
					var data = new Array();
					data.push('<a style="padding-right:20px;">');
//					data.push('<img class="mui-pull-left mr5" style="width:100px; height:80px;" src="'+houseInfo.coverImage+'">');
					data.push('<div class="mui-pull-left mr5" style="border-radius: 4px;width: 100px; height: 75px; overflow: hidden;">');
		            data.push('<img src="'+houseInfo.coverImage+'" >');
		            data.push('</div>');
					data.push('<div class="mui-media-body" style="white-space: normal;">');
					data.push('<span style="font-weight: bold;">'+houseInfo.title+'</span>');
	                data.push('<div class="mui-clearfix">');
	                data.push('<div>');
	                data.push('<h5>'+houseInfo.bedRoomNumber+'室'+houseInfo.livingRoomNumber+'厅&nbsp;'+houseInfo.square+'平方</h5>');
	                for (var j in keywords) {
            			var keyidx = j%keywordCls.length;
            			data.push('<button type="button" class="mui-btn '+keywordCls[keyidx]+' keyword-btn">'+keywords[j]+'</button>');
            		}
	                data.push('</div>');
	                data.push('<span class="mui-badge mui-badge-warning mui-badge-inverted f14">'+parseInt(houseInfo.totalPrice / 10000)+'万</span>');
	                
	                
	                data.push('</div>');
	                data.push('</div>');
	                
	                data.push('</a>');
	                
					li.innerHTML = data.join('');
					fragment.appendChild(li);
				}
				return fragment;
			};
			
	function setImgWidthHeight(imgObj){
//		console.log(imgObj.length);
		var RATE = 0.75;	//常量，图片框比例
		imgObj.each(function(){
			$(this).load(function(){
				var rate = parseFloat($(this).height()/$(this).width());
				if(rate<RATE){		//高度不够
					$(this).css('height','75px');
					$(this).css('width',$(this).height()/rate);
				}else{				//宽度不够
					$(this).css('width','100px');
					$(this).css('height',$(this).width()*rate);
				}
				if($(this).width()>100){
					var marginLeft = parseInt(-($(this).width()-100)*0.5);
					$(this).css('margin-left',marginLeft);
				}
				if($(this).height()>75){
					var marginTop = parseInt(-($(this).height()-75)*0.5);
					$(this).css('margin-top',marginTop);
				}
//				console.log($(this).width()+','+ $(this).height());
			});
		});
	}
	
					
			mui('.mui-table-view').on('tap','.mui-table-view-cell',function(){
//				console.log(this.getAttribute('id'));
				mui.openWindow({
					url:'house_detail.html',
					id:'house_detail',
					extras:{
						houseId:this.getAttribute('id')
					}
				})
			});
	
			
		</script>
	</body>

</html>